<template>
	<a-modal
		:visible="props.visible"
		title="补款审批"
		:footer="null"
		:width="1300"
		@cancel="emits('update:visible', false)"
	>
		<!-- 基本信息 -->
		<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">基本信息</div>
		<div class="flex flex-wrap gap-4 my-6">
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同编号</span><span class="ml-3">{{ props.info.payment.code || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约方式</span
				><span class="ml-3">{{ signMethodEnum[props.info.payment.signMethod] }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约场景</span
				><span class="ml-3">{{ $TOOL.dictTypeData('SignPayment', props.info.payment.signPayment) }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同总金额</span
				><span class="ml-3">{{ props.info.payment.contractAmount || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">定金总金额</span
				><span class="ml-3">{{ props.info.payment.depositAmount || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">尾款总金额</span
				><span class="ml-3">{{ props.info.payment.balancePayment || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">尾款结算日期</span
				><span class="ml-3">{{ props.info.payment.balancePaymentTime || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">甲方抬头</span
				><span class="ml-3" style="white-space: normal">{{ props.info.payment.firstParty || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">乙方抬头</span
				><span class="ml-3" style="white-space: normal">{{ props.info.payment.secondPartyName || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">合同创建人</span
				><span class="ml-3">{{ props.info.payment.createUserName || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">创建时间</span><span class="ml-3">{{ props.info.payment.createAt || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">签约日期</span><span class="ml-3">{{ props.info.payment.signingDate || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/1)] truncate">
				<span class="text-gray-500">合同备注</span
				><span class="ml-3" style="white-space: normal">{{ props.info.payment.remark || '-' }}</span>
			</div>
		</div>

		<!-- 订单信息 -->
		<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">补款信息</div>
		<a-table
			:columns="columns"
			:data-source="props.info.list"
			:scroll="{ x: 1200 }"
			:pagination="false"
			size="small"
			class="my-[20px]"
		/>
		<div class="flex flex-wrap gap-4 my-6">
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">补款合计</span
				><span class="ml-3">{{ props.info.paymentPay.receivedAmount || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">付款日期</span><span class="ml-3">{{ props.info.paymentPay.payDate || '-' }}</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">付款凭证</span
				><span class="ml-3 text-blue-500 cursor-pointer" @click="onPreview">查看</span>
			</div>
			<div class="w-[calc((100%-50px)/4)] truncate">
				<span class="text-gray-500">备注</span
				><span class="ml-3" style="white-space: normal">{{ props.info.paymentPay.remark || '-' }}</span>
			</div>
		</div>

		<!-- 收款信息 -->
		<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">收款信息</div>
		<div>
			<div v-for="(item, index) in payInfoList" :key="index">
				<div class="flex justify-end">
					<a-button v-if="index === 0" type="link" @click="addPayInfo">新增</a-button>
					<a-button v-if="payInfoList.length > 1" type="link" @click="removePay(index)">删除</a-button>
				</div>
				<a-row class="border border-solid border-gray-300 px-3 pt-2 pb-4">
					<a-col :span="12" class="flex mb-[10px]">
						<div class="text-gray-500 my-1 w-[80px]">收款方式</div>
						<a-select class="w-[320px]" v-model:value="item.companyAccountId" :options="payOptions"></a-select>
					</a-col>
					<a-col :span="12" class="flex mb-[10px]">
						<div class="text-gray-500 my-1 w-[80px]">收款时间</div>
						<a-date-picker v-model:value="item.payTime" valueFormat="YYYY-MM-DD hh:mm:ss" class="w-[320px]" />
					</a-col>
					<a-col :span="12" class="flex">
						<div class="text-gray-500 my-1 w-[80px]">到账金额</div>
						<a-input-number v-model:value="item.receivedAmount" class="w-[320px]"></a-input-number>
					</a-col>
					<a-col :span="12" class="flex">
						<div class="text-gray-500 my-1 w-[80px]">手续费</div>
						<a-input-number v-model:value="item.commission" class="w-[320px]"></a-input-number>
					</a-col>
				</a-row>
			</div>
		</div>
		<div class="flex items-start mt-[30px]">
			<div class="w-[60px] pr-2">备注</div>
			<a-textarea v-model:value="remark" placeholder="请输入" :rows="4" />
		</div>

		<!-- 通过驳回按钮 -->
		<div class="flex justify-center gap-6 pt-6">
			<a-button type="primary" @click="pass">通过</a-button>
			<a-button @click="rejectVisible = true">驳回</a-button>
		</div>
	</a-modal>

	<!-- 驳回确认弹框 -->
	<a-modal v-model:visible="rejectVisible" title="审核" @ok="reject">
		<div>
			<div class="text-gray-500 mb-4">驳回意见(必填)</div>
			<a-textarea v-model:value="rejectReason" placeholder="请输入" :rows="4"></a-textarea>
		</div>
	</a-modal>

	<!-- 查看付款凭证 -->
	<image-preview ref="imagePreviewRef" />
</template>
<script setup>
	import { message, Modal } from 'ant-design-vue'
	import tool from '@/utils/tool'
	import erpApi from '@/api/biz/bizCommonApi'
	import { createVNode } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import financePaymentApi from '@/api/biz/payment/bizFinancePaymentApi'
	import ImagePreview from '@/components/drawer/imagePreview.vue'
	import { signMethodEnum } from '../contractManagement/enum/contractEnum'

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		info: {
			type: Object
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 190,
			fixed: 'left'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			ellipsis: true,
			customRender: ({ text }) => tool.dictTypeData('BUSINESS_TYPE', text)
		},
		{
			title: '服务类型',
			dataIndex: 'serviceTypeName',
			width: 220,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${text} > ${record.serviceProjectName}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '补款金额',
			dataIndex: 'payPayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '剩余尾款金额',
			dataIndex: 'reduceBalancePayment',
			width: 110,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 120,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 120,
			customRender: ({ text }) => text || '-'
		}
	]

	onBeforeMount(() => {
		getCompanyAccount()
	})

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const payInfoList = ref([
		{
			commission: undefined,
			payTime: undefined,
			receivedAmount: undefined,
			companyAccountId: undefined
		}
	])
	const payOptions = ref([])
	const getCompanyAccount = () => {
		erpApi.getCompanyAccount().then((res) => {
			payOptions.value = res.map((item) => {
				return {
					...item,
					value: item.id,
					label: item.accountType
				}
			})
			payEnum.value = toEnum(payOptions.value)
		})
	}
	const toEnum = (value) => {
		return Object.fromEntries(
			value.map((item) => {
				const arr = []
				arr[0] = item.value
				arr[1] = item.label
				return arr
			})
		)
	}
	const payEnum = ref({})
	/**
	 * 新增付款信息
	 */
	const addPayInfo = () => {
		payInfoList.value.push({
			commission: undefined,
			payTime: undefined,
			receivedAmount: undefined,
			companyAccountId: undefined
		})
	}
	/**
	 * 删除付款信息
	 * @param {*} index 索引
	 */
	const removePay = (index) => {
		payInfoList.value.splice(index, 1)
	}
	/**
	 * 备注
	 */
	const remark = ref(null)

	/**
	 * 通过
	 */
	const pass = () => {
		let check = false
		payInfoList.value.map((item) => {
			item.contractNo = props.info.payment.code
			item.companyAccountName = payEnum.value[item.companyAccountId]
			const flag = Object.values(item).some((v) => !v && v !== 0)
			if (flag) {
				check = flag
			}
		})
		if (check) {
			message.warning('请完收款信息')
			return
		}

		Modal.confirm({
			title: '确认审批通过?',
			icon: createVNode(ExclamationCircleOutlined),
			onOk() {
				const params = {
					type: 0,
					list: payInfoList.value,
					id: props.info.id,
					remark: remark.value,
					financeApprovalRemark: remark.value
				}
				financePaymentApi.approve(params).then(() => {
					emits('update:visible', false)
					emits('finished')
				})
			},
			onCancel() {
				console.log('Cancel')
			}
		})
	}
	/**
	 * 驳回逻辑
	 */
	const rejectReason = ref('')
	const rejectVisible = ref(false)
	const reject = () => {
		if (!rejectReason.value) {
			message.warning('请填写拒绝原因')
			return
		}
		const params = {
			type: 1,
			rejectReason: rejectReason.value,
			id: props.info.id
		}
		financePaymentApi.approve(params).then(() => {
			rejectVisible.value = false
			rejectReason.value = ''
			emits('update:visible', false)
			emits('finished')
		})
	}

	/**
	 * 查看凭证
	 */
	const imagePreviewRef = ref(null)
	const onPreview = () => {
		const { imgUrl } = props.info.paymentPay
		imgUrl &&
			imagePreviewRef.value.open({
				title: '查看付款凭证',
				tip: '凭证查看（点击图片查看大图）',
				list: imgUrl.split(',')
			})
	}
</script>
<style lang="less" scoped>
	:deep(.ant-input-number-handler-wrap) {
		display: none;
	}
</style>
